import React, { PureComponent } from 'react';
import { IconC, NormalCardC } from '../../../components';

import { connect } from 'dva';
import myStyle from './style.less';

@connect(({ exchangeRateMessageM }) => ({ exchangeRateMessageM }))
export default class RateCardC extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      cardData: undefined, // 卡片数据
    };
  }

  componentDidMount() {
    this.setState({
      cardData: this.props.cardData,
    });
  }

  componentDidUpdate(prevProps) {
    if (JSON.stringify(prevProps.cardData) != JSON.stringify(this.props.cardData)) {
      this.setState({
        cardData: this.props.cardData,
      });
    }
  }

  renderContent = (cardData) => {
    return (
      <div className={myStyle.centerBox}>
        <div className={myStyle.topPart}>
          {/* 卡片上半部分 */}

          <IconC type={'rateMessage'} style={{ width: '36px', height: '36px', margin: '0 20px 0 0' }} />

          <span className={myStyle.bigFont}>{cardData?.sourceCurrency ? cardData?.sourceCurrency : '--'}</span>

          <IconC type={'rateMessageRightArrow'} style={{ width: '26px', height: '8px', margin: '0 16px' }} />

          <span className={myStyle.bigFont} style={{ flex: '1' }}>
            {cardData?.targetCurrency ? cardData?.targetCurrency : '--'}
          </span>

          <span className={myStyle.normalFont}>{cardData?.date ? cardData?.date : '--'}</span>
        </div>

        <div className={myStyle.bottomPart}>
          {/* 卡片下半部分 */}
          <div className={myStyle.bottomItem} style={{ marginRight: '20px' }}>
            <span className={myStyle.bigFont} style={{ marginBottom: '4px' }}>
              {cardData?.buyReferenceRate ? Number(cardData?.buyReferenceRate).toFixed(6) : '--'}
            </span>
            <span className={myStyle.normalFont}>买入参考汇率</span>
          </div>

          <div className={myStyle.bottomItem} style={{ marginRight: '20px' }}>
            <span className={myStyle.bigFont} style={{ marginBottom: '4px' }}>
              {cardData?.sellReferenceRate ? Number(cardData?.sellReferenceRate).toFixed(6) : '--'}
            </span>
            <span className={myStyle.normalFont}>卖出参考汇率</span>
          </div>

          <div className={myStyle.bottomItem} style={{ marginRight: '20px' }}>
            <span className={myStyle.bigFont} style={{ marginBottom: '4px' }}>
              {cardData?.middleRate ? Number(cardData?.middleRate).toFixed(6) : '--'}
            </span>
            <span className={myStyle.normalFont}>中间价</span>
          </div>

          <div className={myStyle.bottomItem} style={{ marginRight: '20px' }}>
            <span className={myStyle.bigFont} style={{ marginBottom: '4px' }}>
              {cardData?.buySettleRate ? Number(cardData?.buySettleRate).toFixed(6) : '--'}
            </span>
            <span className={myStyle.normalFont}>买入结算汇率</span>
          </div>

          <div className={myStyle.bottomItem}>
            <span className={myStyle.bigFont} style={{ marginBottom: '4px' }}>
              {cardData?.sellSettleRate ? Number(cardData?.sellSettleRate).toFixed(6) : '--'}
            </span>
            <span className={myStyle.normalFont}>卖出结算汇率</span>
          </div>
        </div>
      </div>
    );
  };

  render() {
    const { cardData } = this.state;
    return (
      <div>
        <NormalCardC width={'100%'} height={'100%'} cardId={cardData?.id} Content={this.renderContent(cardData)} />
      </div>
    );
  }
}
